

<div class="container-fluid">
  <div class="toolbar">
    <button class="btn btn-success btn-sm" id="add-bush-btn" data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-type="add">添加</button>
  </div>

  <table id="table"></table>
</div>

<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="form-title" data-type="">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="form-title"></h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="web-name"  class="control-label">名称：</label>
            <input type="text" class="form-control" id="web-name">
          </div>
          <div class="form-group">
            <label for="web-tmpl"  class="control-label">模版：</label>
            <select  class="form-control" id="web-tmpl">
              <option value="default">默认模版</option>
              <option value="rich">丰富模版</option>
            </select>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"  >关闭</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="submit">确定</button>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {

    let app = {

      table: $('#table'),
      modal: $('#modal-form'),
      submit: $('#submit'),
      webNameObj:$('#web-name'),
      webTmplObj:$('#web-tmpl'),
      init: function () {
          let self=this;
          self.initTable();
          self.event();
      },
      initTable: function () {
        let self = this;
        self.table.destroyTable().initTable({
          method: 'get',
          url: '/admin/bi/page',
          queryParams: function (params) {
            //补充自定义参数
            return {
              size: params.pageSize,
              page: params.pageNumber,
            };
          },
          responseHandler: function (res) {
            //在ajax获取到数据，渲染表格之前，修改数据源
            //该项返回的为数据源内的二级列表data
            return {
              rows: res.data.rows,
              total: res.data.total,
            };

          },
          columns: [
            {
              title: '报表KEY',
              visible: true,
              align: 'center',
              field: 'uuid',
              valign: 'middle',
              width: "20%"
            },
            {
              title: '报表实例',
              field: 'name',
              visible: true,
              align: 'center',
              valign: 'middle',
              sortable: false,
              width: "20%"
            },
            {
              title: '模版',
              field: 'tmpl',
              visible: true,
              align: 'center',
              valign: 'middle',
              sortable: false,
              width: "10%",
              formatter: function (value, row, index) {

                if (value === "default") {
                  return "<span class='btn-success btn-sm'>" + value + "</span>"
                }

                if (value === "rich") {
                  return "<span class='btn-danger btn-sm'>" + value + "</span>"
                }

                return "<span class='btn-primar btn-sm'>" + value + "</span>"

              }
            },
            {
              title: '状态',
              field: 'status',
              visible: true,
              align: 'center',
              valign: 'middle',
              sortable: false,
              width: "20%",
              formatter: function (value, row, index) {
                if (value === 1) {
                  return '<span class="btn-primary btn-sm">应用中</span>'
                }
                return '<span class="btn-danger btn-sm">停用</span>'
              }
            },
            {
              title: '操作',
              field: 'operator',
              visible: true,
              align: 'center',
              valign: 'middle',
              sortable: false,
              width: "30%",
              formatter: function (value, row, index) {
                value = row["id"]
                let statusTxt = "启用"
                let dataStatus = 1
                let statusClass = "btn-primary"
                let status = row["status"]
                let previewUrl = "/bi/dash/" + row["tmpl"] + "/" + row["uuid"]
                if (status === 1) {
                  dataStatus = 2
                  statusTxt = "停用"
                  statusClass = "btn-danger"
                }
                let designUrl = "/admin/bi/design?tmpl=" + row["tmpl"] + "&id=" + value + "&ts=" + "${.ts}"
                return "<div class='btn-group operator-group' ><a    href='" + previewUrl + "'  class='btn btn-xs  btn-cyan'  data-id=" + value + ">预览</a><a class='btn btn-xs dash-status btn-danger' data-status='0'  data-id=" + value + ">删除</a><a  data-type='info' class='btn btn-xs  btn-success ' data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id=" + value + ">查看</a><a  data-type='edit' class='btn btn-xs  btn-info'  data-toggle='modal' data-target='#modal-form' data-whatever='@mdo' data-id=" + value + ">编辑</a><a class='btn btn-xs dash-status " + statusClass + "'  data-type='del'  data-status=" + dataStatus + "   data-id=" + value + ">" + statusTxt + "</a><a href='" + designUrl + "'  class='btn btn-xs  btn-info'  data-id=" + value + ">去设计</a></div>"
              }
            }
          ]
        });
      },
      event: function () {

        let self = this;
        self.modal.on('show.bs.modal', function (event) {
          let button = $(event.relatedTarget),
                  dType = button.data('type'),
                  modal = $(this),
                  nameObj = self.webNameObj,
                  id = button.data('id'),
                  tmplObj = self.webTmplObj;

          modal.attr('data-id', id)
          modal.attr('data-type', dType)

          if (dType !== 'add') {

            doGet("/admin/bi/find?id=" + id, function (data) {

              nameObj.val(data.data.name)
              tmplObj.val(data.data.tmpl)

            }, function (data) {

            })

          }

          switch (dType) {
            case 'add':
              modal.find('.modal-title').text('创建')
              return
            case 'info':
              modal.find('.modal-title').text('查看')
              self.readOnlyForm();
              return
            case 'edit':
              modal.find('.modal-title').text('编辑')
              return

          }


        }).on("hide.bs.modal", function (event) {

              self.resetForm();

        })
        self.submit.click(function (event) {

          let modal = self.modal,
                  dType = modal.attr('data-type'),
                  name = self.webNameObj.val(),
                  tmpl = self.webTmplObj.val(),
                  id = parseInt(modal.attr("data-id"))

          switch (dType) {
            case 'edit':
              modal.find('.modal-title').text('编辑')
              doPost("/admin/bi/update", {
                  "name": name,
                  "id": id,
              }, function (data) {
                 self.initTable();
              })
              return
            case 'add':
              modal.find('.modal-title').text('添加')
              doPost("/admin/bi/add", {
                "name": name,
                "tmpl": tmpl,
              }, function (data) {
                self.initTable();
              }, function (data) {

              })
              return;


          }
        });
        self.table.on('click', '.dash-status', function () {


          let id = parseInt($(this).attr('data-id'));
          let status = parseInt($(this).attr('data-status'));
          if (status == 0) {
            //删除
            doPost("/admin/bi/remove", {id: id, status: status}, function (data) {
              self.initTable();
            })
            return
          }

          doPost("/admin/bi/enable", {id: id, status: status}, function (data) {
            self.initTable();
          })


        })

      },
      readOnlyForm:function(){
         let self=this;
        //不可编辑
        self.webNameObj.prop("readonly", true);
        self.webTmplObj.prop('disabled', true);
      },
      resetForm:function(){
        let self=this;
        //不可编辑
        self.webNameObj.prop("readonly", false).val("");
        self.webTmplObj.prop("disabled",false);
      },


    }

    app.init();
  });


</script>
